<template>
	<div>
		  <el-dialog
		    v-model="dialogVisible"
		    title="设置"
		    width="50%"
				:before-close="handleClose"
		  >
				<div class="view-style">
					<popupContent marginTop="20" content='发音人' >
					<!-- 	<div  style="margin-left: 15px;color: #909399;width: 100%;" @click="$store.state.settings.popupShow =true">
							{{$store.state.settings.voiceName}}<div style="display: inline-block;font-size: 12px;">(点击切换)</div>
						</div> -->
						<el-cascader :options="options" :show-all-levels="false" :props="props" v-model="$store.state.settings.cascaderArray" @change="change"/>
					</popupContent>
					<popupContent  content='音量' display="block">
						<el-slider v-model="$store.state.settings.volume"  :min="10" :max="100" ></el-slider>
					</popupContent>
					<popupContent  content='语速' display="block">
						<el-slider v-model="$store.state.settings.speech_rate"  :min="-100" :max="100" ></el-slider>
					</popupContent>
					<popupContent  content='语调' display="block">
						<el-slider v-model="$store.state.settings.pitch_rate"  :min="-100" :max="100" ></el-slider>
					</popupContent>
					
					 <div style="text-align: center;margin-top: 15px;">
						  <el-divider>
								<el-text class="mx-1" type="danger">语音次数不足,扫码咨询</el-text>
							</el-divider>
						 <el-image
						      style="width: 100px; height: 100px"
						      :src="src"
						 								:preview-src-list="srcList"
						      :zoom-rate="1.2"
						      :initial-index="0"
						      fit="cover"
						    />
					 </div>
					<!-- <el-button text="语音次数不足,咨询客服" @click="showQrcode"  size="normal" type="primary" plain></el-button> -->
				<!-- 	<MyPopup :popupShow="settings.popupShow" @closePopup="settings.popupShow = $event">
						<wyh-tree-select :items="items" @click-item="clickVoiceInfo" :max="1" :title="'选择地区'"/>
					</MyPopup> -->
				</div>
			</el-dialog>
	</div>
</template>

<script>
	var that;
	import popupContent from '@/components/popupContent.vue'
	export default{
		data(){
			return{
				src: '',
				srcList:[],
				dialogVisible: false,
				number: '0/5',
				number1: '0秒',
				show: false,
				expireTime: 0,//过期时间
				settings:{
					voiceName: '艾琪，温柔女声',
					voice: 'aiqi',//发音人
					volume: 50,//音量
					speech_rate:0,//语速
					pitch_rate: 0,//语调
					popupShow: false,
				},
				options: [{
					text: '通用',
					id: 50,
					children: [
						// {
						// 	// 名称
						// 	text: '温州',
						// 	// id，作为匹配选中状态的标识符
						// 	id: 1,
						// 	// 禁用选项
						// 	// disabled: true,
						// },
						{ text: '艾琪，温柔女声',id: 2,voice: 'aiqi'},
						{ text: '思琪，温柔女声',id: 3,voice: 'siqi'},
						{ text: '思佳，标准女声',id: 4,voice: 'sijia'},
						{ text: '思诚，标准男声',id: 5,voice: 'sicheng'},
						{ text: '艾达，标准男声',id: 6,voice: 'aida'},
						{ text: '思佳，标准女声',id: 7,voice: 'sijia'}
					]
				},
				{
					text: '多情感',
					id: 51,
					children: [
						{ text: '知米_多情感',id: 8,voice: 'zhimi_emo,happy'},
						{ text: '知燕_多情感',id: 9,voice: 'zhiyan_emo,happy'},
						{ text: '知贝_多情感',id: 10,voice: 'zhibei_emo,happy'},
						{ text: '知甜_多情感',id: 11,voice: 'zhitian_emo,happy'}
					]
				},
				{
					text: '童声',
					id: 52,
					children: [
						{ text: '艾彤，儿童音',id: 12,voice: 'aitong'},
						{ text: '艾薇，萝莉女声',id: 13,voice: 'aiwei'},
						{ text: '杰力豆，治愈童声',id: 14,voice: 'jielidou'},
						{ text: '小北，萝莉女声',id: 15,voice: 'xiaobei'},
						{ text: '思彤，儿童音',id: 16,voice: 'sitong'},
						{ text: '艾宝，萝莉女声',id: 17,voice: 'aibao'}
					]
				},
				{
					text: '方言',
					id: 53,
					children: [
						{ text: '佳佳，粤语女声',id: 18,voice: 'jiajia'},
						{ text: '大虎，东北话男声',id: 19,voice: 'dahu'},
						{ text: '翠姐，东北话女声',id: 20,voice: 'cuijie'},
						{ text: '艾侃，天津话男声',id: 21,voice: 'aikan'},
						{ text: '青青，台湾话女声',id: 22,voice: 'qingqing'},
						{ text: '小泽，湖南重口音',id: 23,voice: 'xiaoze'},
						{ text: '小玥，四川话女声',id: 24,voice: 'chuangirl'}
					]
				}
				],
				props:{
					label: 'text',
					value: 'id'
				}
			};
		},
		mounted() {
			that=this;
			that.createCode();
			that.get();
		},
		methods:{
			async get(){
				const res = await that.$asyncHttp("/util/getExpire", {
					uid: that.$store.state.uid
				})
				that.options.unshift(res.textAudio);
			},
			handleClose(){
				that.dialogVisible = false;
			},
			createCode(){
				that.$http.post('/pay/createQRCodeImage',{uid:that.$store.state.uid},{
					headers:{
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					responseType: 'blob'
				}).then((res)=>{
					console.log(res.data)
					const myBlob = new window.Blob([res.data])
					const qrUrl = window.URL.createObjectURL(myBlob)
					
					that.src=qrUrl;
					that.srcList=[qrUrl];
				
				})
			},
			//保存信息
			change(value){
				let id =value[value.length -1];
				
				that.options.map(function (item, index) {
					item.children.map(function (city, ind) {
						if(id == city.id) {
							//发音人
						that.$store.state.settings.voice=city.voice;
						that.$store.state.settings.voiceName=city.text;
						}
					})
				})

			},
		},
		components:{
			popupContent
		},
	}
</script>

<style>
	.view-style{
		height: 45vh;
		margin: 10px;
		border-radius: 10px;
		background-color: #ffffff;
		overflow-y: auto;
	}
	.view-text-style{
		width: 70%;
		font-size: 12px;
		color: #909399;
		text-align: center;
		margin: 10px auto;
		
	}
</style>